import React from 'react';
import classnames from 'classnames';

import styles from './index.module.less';

const Container = ({
  flex,
  justify,
  strength,
  alignItems,
  direction,
  padding,
  margin,
  className,
  style,
  children,
  onClick,
  ...props
}) => {
  const classNames = classnames(
    flex && styles.flex,
    className,
  );
  const defaultStyle = {
    justifyContent: justify,
    alignItems,
    flexDirection: direction,
    flex: strength && '1',
    padding,
    margin,
    ...style,
  };
  return (
    // eslint-disable-next-line max-len
    <div className={classnames(styles.container, classNames)} style={defaultStyle} onClick={onClick} {...props}>
      {React.Children.map(children, value => value)}
    </div>
  );
};

export default Container;
